<template>
  <div>
    <div style="width:100%;height:5px;background-color:#F8F8F8"></div>
    <div class="aa">
      协商历史
      <img
        src="../../../../static/img/mn/right.png"
        style="width:6px;height:12px;float:right;margin-top:3px;"
        alt
        @click="toHistory"
      />
    </div>
    <div style="width:100%;height:5px;background-color:#F8F8F8"></div>
    <div v-if="detailInfo">
      <div class="aa">退款信息</div>
      <div class="a" >
        <div class="b">
          <div class="b_1" >
            <img :src="detailInfo.goodsImage" alt />
          </div>
          <div class="b_2">
            <div class="b_21">{{detailInfo.comName}}</div>
            <div class="b_22">数量 X{{detailInfo.goodsCount}}</div>
          </div>
        </div>
        <div class="txt">
          <span>退款金额</span>
          <span style="float:right;" v-if="detailList.adminRefundAmount!=null" >¥ {{detailList.adminRefundAmount}}</span>
          <span style="float:right;" v-if="detailList.adminRefundAmount==null">--</span>
        </div>
        <div class="txt">
          <span>退款类型</span>
          <span style="float:right;">{{change(detailList.refundType)}}</span>
        </div>
        <div class="txt">
          <span>退款原因</span>
          <span style="float:right;">{{detailList.refundReason}}</span>
        </div>
        <div class="txt" v-if="detailList.refundSn!='' || detailList.refundSn!=null">
          <span>退款编号</span>
          <span style="float:right;">{{detailList.refundSn}}</span>
        </div>
        <div class="txt">
          <span>申请时间</span>
          <span style="float:right;">{{detailList.refundAddTime}}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getFun } from "@/api/publicFun.js";
let publicFun = getFun();
export default {
  data() {
    return {
      url1: this.$api + "/marketorderservice/api/v1/market/orders", // 获取订单详情的接口
      userId: "",
      refundId: "",
      ordersId: "",
      detailList: [],
      detailInfo: []
    };
  },
  methods: {
    toHistory() {
      let arg ='[{"userId":"' + this.userId + '"},{"refundId":"' + this.refundId + '"}]';
      this.link("/market/orders/history", arg);
    },
    //初始化获取信息
    getInfo() {
      let that = this;
      let url = this.$api + "/marketorderservice/api/v1/market/refund/log/list";
      let params = {
        refundId: this.refundId,
        userId: this.userId
      };
      this.$Axios.Post(url, params).then(function(res) {
        if(res.data.refundRVo){
          that.detailList = res.data.refundRVo.refund;
          that.refundState = res.data.refundRVo.refund.refundState;
        }
      });
    },
    getData() {
      let that = this;
      this.$Axios2
        .Get(this.url1 + "/" + this.ordersId + "/" + this.userId)
        .then(function(res) {
          if(res.data.orders){
            that.detailInfo = res.data.orders;
          }
        });
    },
    change(str) {
      if (str == "1") {
        return (str = "仅退款");
      } else if (str == "2") {
        return (str = "退货退款");
      } else {
        return (str = "");
      }
    }
  },
  mixins: [publicFun], //混入
  mounted() {
    this.userId = this.$router.currentRoute.query.userId;
    this.ordersId = this.$router.currentRoute.query.ordersId;
    this.refundId = this.$router.currentRoute.query.refundId;
    this.getInfo();
    this.getData();
  }
};
</script>

<style scoped="">
.aa {
  padding: 15px 20px;
  font-size: 14px;
  font-weight: 500;
}
.b {
  display: flex;
  padding: 15px;
  border-top: 1px solid #e5e5e5;
  border-bottom: 1px solid #e5e5e5;
}
.b_1 img {
  width: 60px;
  height: 60px;
  display: block;
  border-radius: 5px;
}
.b_2 {
  flex: 1;
  padding: 0 20px 0 10px;
}
.b_21 {
  font-size: 14px;
  display: -webkit-box;
  font-weight: bold;
  opacity: 0.75;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.b_22 {
  color: #ccc;
  margin-top: 5px;
}
.a {
  padding: 10px;
}
.txt {
  font-size: 12px;
  color: #999999;
  padding: 15px 15px 0 15px;
}
</style>